<template>
  <div class="loginBox">

    <vue-particles
      class="particles"
      color="#e5eaff"
      :particleOpacity="0.7"
      :particlesNumber="80"
      shapeType="circle"
      :particleSize="4"
      linesColor="#bfcbff"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="false"
      clickMode="push"
    >
    </vue-particles>

    <div class="loginContent">
      <h4>后台管理系统</h4>
      <normal-form v-if="isChildren" :formValue="formValue" ref="normalForm">

        <el-form-item v-if="isLogin" slot="btnControl">
          <el-button @click="isRegister">前往注册</el-button>
          <el-button type="primary" @click="login">登录</el-button>
        </el-form-item>

        <el-form-item v-if="!isLogin" slot="btnControl">
          <el-button @click="isRegister">返回登录</el-button>
          <el-button type="primary" @click="register">注册</el-button>
        </el-form-item>

      </normal-form>
    </div>

  </div>
</template>

<script>
// import * as api from 'api/api.js'

import normalForm from '@/components/normalForm'

// 表单数据
const registerForm = [
  {
    value: '用户名',
    key: 'user',
    data: '',
    type: 'text',
    required: true
  }, {
    value: '新密码',
    key: 'newPass',
    data: '',
    type: 'password',
    required: true
  }, {
    value: '重复新密码',
    key: 'againNewPass',
    data: '',
    type: 'password',
    required: true
  }, {
    value: '验证码',
    key: 'authCode',
    data: '',
    type: 'text',
    required: true
  }
]

// 获取login的表单数据
const loginForm = [
  {
    value: '用户名',
    key: 'userName',
    data: '',
    type: 'text',
    required: true
  }, {
    value: '密码',
    key: 'passWord',
    data: '',
    type: 'password',
    required: true
  }
]

export default {
  data () {
    return {
      isLogin: true,
      formValue: _.cloneDeep(loginForm),
      isChildren: true,
      publicJs: null
    }
  },

  components: { normalForm },

  created () {
    this.publicJs = new this.$publicJs
  },

  mounted () {

  },

  methods: {
    login () {
      let data = this.formValue
      console.log(this.publicJs.changeTodata(data))
      this.$router.push('/home/index')
      this.formValue = this._.cloneDeep(loginForm)
      localStorage.setItem('isLogin', 'true')
    },

    isRegister () {
      this.isChildren = false
      this.$nextTick(() => {
        this.isChildren = true
        if (this.isLogin) {
          this.formValue = this._.cloneDeep(registerForm)
        } else {
          this.formValue = this._.cloneDeep(loginForm)
        }
        // this.$refs.normalForm.getRulesValue()
        this.isLogin = !this.isLogin
      })
    },

    register () {
      console.log(123)
    }

  },

  watch: {}
}
</script>

<style lang='scss' scoped type="text/css">
.loginBox{
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  .particles {
    position: fixed;
    z-index: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(40, 48, 72, 1), rgba(133, 147,152, 1));
  }
  .loginContent {
    width: 400px;
    height: auto;
    background-color: rgba(255, 255, 255, .8);
    border-radius: 10px;
    overflow: hidden;
    padding: 30px;
    position: relative;
    z-index: 900;
    top: -80px;
    h4 {
      padding-bottom: 20px;
      font-size: 26px;
    }
  }
}
</style>
